import * as echarts from 'echarts';
import {markRaw} from "vue"

export class Constant {
  static TYPE = {
    BAR: "bar",
    LINE: "line",
    PIE: "pie",
  }
}

export class BaseEcharts {

  constructor(dom) {
    this.dom = dom;
    this.type = Constant.TYPE.BAR;
    this.option = {};
    this.myChart = null;
    this.raw = {}; // 原始数据
    this.isEmpty = true;

    this.chartsDataFuc = {
      [Constant.TYPE.BAR]: this._configBarData,
      [Constant.TYPE.LINE]: this._configLineData,
      [Constant.TYPE.PIE]: this._configPieData
    };
  }

  init() {
    if (!this.dom) {
      return;
    }
    if (this.myChart) {
      this.myChart.dispose();
    }
    const elem = document.getElementById(this.dom);
    this.myChart = markRaw(echarts.init(elem));
  }

  create(raw, type = this.type) {
    this.type = type || Constant.TYPE.BAR;
    let data = this._configData(raw);
    if (this.myChart) {
      this.myChart.clear();
      this.crateChart(data);
    }
  }

  _configData(raw) {
    this.raw = raw;
    let data = this.chartsDataFuc[this.type](raw);
    return data;
  }

  _configBarData() {

  }

  _configLineData() {

  }

  _configPieData() {

  }

  crateChart(data) {
    if (this.type === Constant.TYPE.BAR) {
      this.createBar(data);
    } else if (this.type === Constant.TYPE.LINE) {
      this.createLine(data);
    } else if (this.type === Constant.TYPE.PIE) {
      this.createPie(data);
    }
  }

  createBar() {

  }

  createLine() {

  }

  createPie() {

  }


  getOption() {
    return this.option;
  }

  getChart() {
    return this.myChart;
  }

  changeChartType() {

  }
}

